.scroll-icon {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 2em;
    width: 1.2em;
    font-size: 22px;
    color: rgba(255, 255, 255, 1);
    border-radius: 2em;
    border: solid 2px;
    -webkit-transition: .4s;
    transition: .4s;
}


.scroll-icon::after {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
    -webkit-animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
    animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}



.dbg{
width:100%;height:100%;
}
.demo{
  text-align: center;
  margin-top: 0px;
  margin-left: 0px;
}
span.counter{
  font-size: 50px;
  font-family: Arial;
  color: #ffffff;
  font-weight: bold;
}
span.jieshao{font-size: 20px;color: #ffffff;}
.demo #demo01{text-align:center;display:inline-block;}
.demo #demo02{text-align:center;display:inline-block;}
.demo #demo03{text-align:center;display:inline-block;}
.demo #demo04{text-align:center;display:inline-block;}
.demo .con{
    width: 24%;
    max-width: 500px;
}

.mine{font-size:16px;color: #ffffff;margin-left: 10px;font-family: pf;}
.sc3{font-size: 14px;color: #ffffff;margin-top: 18px;display: block;line-height: 1.8;}

@media only screen and (max-width: 768px){
  .sc3{font-size:14px;margin-top: 10px;margin-bottom: 20px;}
  span.jieshao{font-size:16px;}
  
  .demo .con{
    width: 40%;
    max-width: 500px;
}
  span.counter {
    font-size: 40px;
    font-family: Arial;
    color: #ffffff;
    font-weight: bold;
}
  span.jieshao {
    font-size: 14px;
}
}